<template>
  <div class="body">
    <div class="top">
      <div class="back">
        <router-link :to="{ name: 'sapecial' }">
          <img src="@/assets/img/back.svg" />
        </router-link>
      </div>

      <img :src="topImg" class="top-img" />

      <div class="top-text">
        <p>{{ topTitle }}</p>
      </div>
    </div>

    <ul class="box">
      <router-link
        tag="li"
        :to="'/articles/' + item.objectId"
        v-for="item in textArr"
        :key="item.id"
      >
        <img :src="item.image" />
        <p>{{ item.title }}</p>
      </router-link>
    </ul>

    <div class="dianzi"></div>
  </div>
</template>

<script>
// let m = "1f8f639744";
// let objectId = this.$route.query.objectId;

export default {
  // props:[
  //   'objectId',
  // ],
  data() {
    return {
      objectId: 1,
      textArr: "",
      topImg: "",
      topTitle: "",
    };
  },
  components: {},
  // mounted() {
  //   this.objectId = this.$route.query.objectId;
  // },
  methods: {
    getData(id) {
      this.$axios
        .get(
          `/1/classes/agopage?order=-order&where=%7B%22special%22%3A%20%22${id}%22%7D`
        )
        .then(({ data }) => {
          this.textArr = data.results;
        });
    },
  },

  created() {
    
    this.objectId = this.$route.query.objectId;
    this.topImg = this.$route.query.topImg;
    this.topTitle = this.$route.query.topTitle;
    this.getData(this.objectId);
  },
};
</script>

<style lang="scss" scoped>
.body {
  background-color: rgba(242, 238, 238, 0.742);
  z-index: 999;
  min-height: 100vh;
}

.top {
  position: relative;
  .top-text {
    position: absolute;
    bottom: 60px;
    color: #fff;
    width: 80%;
    margin-left: 10%;
    font-size: 19px;
    border-bottom: 3px solid #fff;

    p {
      padding-bottom: 20px;
      padding-left: 8px;
    }
  }

  .back {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 40px;
    height: 40px;
  }

  .top-img {
    width: 100vw;
    height: 280px;
  }
}

.box {
  li {
    display: block;
    width: 75%;
    height: 250px;
    background-color: rgba(242, 238, 238, 0.742);
    margin: 20px auto;
    border-radius: 8px;
    box-shadow: 1px 1px 10px #888888;

    img {
      width: 94%;
      margin: 8px;
    }

    p {
      text-align: center;
      font-size: 18px;
      width: 90%;
      margin: 5px auto;
    }
  }
}

.dianzi {
  height: 50px;
}
</style>>
